<template>
    <view class="confirmOrder">
      <!-- 密码 -->
		<uni-popup ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
			<view class="modalPsd">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请输入支付密码</view>
							<view class="psdBox-input">
								<input type="password" v-model="password" placeholder="请输入支付密码" placeholder-class="inputStyle">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('psdPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(psdSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
    <!-- 支付 -->
		<uni-popup ref="payPopup" type="bottom" :animation="true" @change="changePopup($event,'payPopup')">
			<view class="modalPsd">
				<view class="modal-wrapper">
					<view class="payBox">
						<view class="payBox-wrapper">
							<view class="payBox-header">支付 <text class="cancel" @tap.stop="hidePopup('payPopup')">取消</text></view>
							<view class="price"><text class="unit">￥</text>{{ payTotal }}</view>
              <template  v-for="(item,index) in payMentArr">
              <!--  #ifdef APP-PLUS || H5 -->
              <view class="info" v-if="index==1"  @tap.stop="changePayMent(item)">
                  <view class="left">
                    <image class="img" :src="IMAGE_STATIC+'/images/payMent-'+(index+1)+'.png'" mode="scaleToFill"/>
                    {{item.name}}
                  </view>
                  <view class="right">
                    <image class="ico" v-if="payTypeObj.id == item.id" :src="IMAGE_STATIC+'/images/radio-checked.png'" mode="scaleToFill"/>
                    <image class="ico" v-else :src="IMAGE_STATIC+'/images/radio.png'" mode="scaleToFill"/>
                  </view>
                </view>
              <!-- #endif -->
               <!--  #ifdef MP-WEIXIN -->
               <view class="info" v-if="index==0"  @tap.stop="changePayMent(item)">
                  <view class="left">
                    <image class="img" :src="IMAGE_STATIC+'/images/payMent-'+(index+1)+'.png'" mode="scaleToFill"/>
                    {{item.name}}
                  </view>
                  <view class="right">
                    <image class="ico" v-if="payTypeObj.id == item.id" :src="IMAGE_STATIC+'/images/radio-checked.png'" mode="scaleToFill"/>
                    <image class="ico" v-else :src="IMAGE_STATIC+'/images/radio.png'" mode="scaleToFill"/>
                  </view>
                </view>
              <!-- #endif -->
              </template>
              <view>
              </view>
							<!-- <view class="info" v-for="(item,index) in payMentArr" :key="index" @tap.stop="changePayMent(item)">
                  <view class="left">
                    <image class="img" :src="IMAGE_STATIC+'/images/payMent-'+(index+1)+'.png'" mode="scaleToFill"/>
                    {{item.name}}
                  </view>
                  <view class="right">
                    <image class="ico" v-if="payTypeObj.id == item.id" :src="IMAGE_STATIC+'/images/radio-checked.png'" mode="scaleToFill"/>
                    <image class="ico" v-else :src="IMAGE_STATIC+'/images/radio.png'" mode="scaleToFill"/>
                  </view>
                </view> -->
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
        <pagehead>确定订单</pagehead>
        <!-- 商品信息 -->
        <view class="goods">
          <view class="item">
            <view class="img">
                <!-- <image :src="imgShow(goodsDetail.goods_show)" lazy-load mode="heightFix"/> -->
                <init-image :src="imgShow(goodsDetail.goods_show)" mode="heightFix" />
            </view>
            <view class="left">
                <view class="name">{{ goodsDetail.goods_name }}</view>
                <view class="price"><text class="unit">￥</text>{{ goodsDetail.goods_price }}</view>
            </view>
          </view>
          <view class="operate">
            <view>领取数量</view>
            <view class="btn">
              <view class="ico-bg" @tap.stop="$u.throttle(redece)" >
									<image :src="IMAGE_STATIC+'/images/jian.png'" mode="" class="ico jian"></image>
								</view>
								<input type="number" v-model="num" class="inp">
								<view class="ico-bg" @tap.stop="$u.throttle(add)">
									<image :src="IMAGE_STATIC+'/images/add.png'" mode="" class="ico add"></image>
								</view>
            </view>
          </view>
          <view class="warn" v-if="shopType=='02' && goodsDetail.goods_type=='01' && currentIndex==0">
            <text>备注：本商品兑换数量最少{{minNum}}台</text>
          </view>
        </view>
        <view class="tab" v-if="shopType=='02' && goodsDetail.goods_type=='01'">
            <view v-for="(item,index) in tabList" :key="index"
             :class="[currentIndex==index?'active':'','item']" @tap="changeTab1(index,item.status)">{{item.name}}</view>
        </view>
        <!-- <view class="info">
            <view class="txt">现金支付</view>
            <view>
              <switch color="#AD2926" :checked="checked==1?true:false"/>
            </view>
        </view> -->
        <view class="info">
            <view class="txt">{{ shopType=='01'?'现金支付':'积分支付' }} </view>
            <view class="p">￥{{ goodsTotal }}</view>
        </view>
        <view class="info">
            <view class="txt">配送方式</view>
            <!-- <view class="p">{{tabIndex==1?'自取':'快递配送'}}</view> -->
            <view class="postMethod">
              <view :class="['item',tabIndex==1?'active':'']" @tap="changeTab(1,'02')">自取</view>
              <view :class="['item',tabIndex==2?'active':'']" @tap="changeTab(2,'01')">快递</view>
            </view>
        </view>
         <!-- 地址 -->
         <view class="address" v-if="sendType=='01'">
          <view class="address-item" v-if="address" @tap.stop="goAddr()">
              <image class="ico-addr" :src="IMAGE_STATIC+'/images/icon-addr.png'" mode="scaleToFill"/>
              <view class="txt">
                <view class="city"> {{ address.address }}</view>
                <view class="name">{{address.name}} {{address.tel}}</view>
              </view>
              <image class="ico" :src="IMAGE_STATIC+'/images/go.png'" mode="scaleToFill"/>
            </view>
            <view class="noaddress" @tap.stop="goAddr()" v-else>选择收货地址
                <image class="ico" :src="IMAGE_STATIC+'/images/go.png'" mode="scaleToFill"/>
            </view>
        </view>
        <view class="info">
            <view class="txt">运费：</view>
            <view class="p">到付</view>
        </view>
        <view class="info">
          <textarea v-model="remark" name="" id="" cols="30" rows="10" placeholder="备注（选填，不超过60个字）"></textarea>
        </view>
        <view class="bottom">
          <view class="left">应付金额：<text class="price">{{ payTotal }}</text></view>
          <view class="btn" @tap.stop="$u.throttle(addOrder,1000)" v-if="orderId == ''">提交订单</view>
          <view class="btn" @tap.stop="$u.throttle(submit,1000)" v-else>{{ shopType=='01'?'确定付款':'确定兑换' }}</view>
        </view>
    </view>
</template>

<script>
export default {
    computed:{
      // 商品总价
      goodsTotal(){
        let sum =0
        sum  = (Number(this.num) * Number(this.goodsDetail.goods_price)).toFixed(2)
        return sum
      },
      // 应付价格
      payTotal(){
        let sum =0
        sum = this.goodsTotal
        // sum  = (Number(this.num) * Number(this.goodsDetail.goods_price) + this.goodsDetail.rate).toFixed(2)
        return sum
      }
    },
    data () {
        return {
          IMAGE_STATIC: this.$url.assetsPath, // 静态图片地址
          num:1, //数量
          remark:'', // 备注
          checked:1, // 现金支付选中
          payTypeObj:{ // 支付方式
            payType:'',
            id:'',
          },
          orderId:'',
          addressId:'',
          password:'',
          address:'',
          payMentArr:[
           {id:1,type:'02',name:'微信'},
            {id:2,type:'01',name:'支付宝'},
            // {id:3,type:3,name:'其他账户'},
          ],
          tabIndex:1,
          sendType:'02', // 01-快递 02-自取
          shopType:'01', // 01-线上物料 02-积分物料
          pickType:'01',
          goodsDetail:{
            id:'',
            price:'',
            goods_name:'',
            des:'',
            postage:0,
          },
          currentIndex:0,
          tabList:[  // 积分的
            {name:'平台兑换',status:'01'},
            {name:'运营中心兑换',status:'02'},
            {name:'上级兑换',status:'03'},
          ],
          minNum:0,
          wechat_code:''
        };
    },
    onLoad (options) {
      if(options){
        this.shopType = options.value1
        this.goodsDetail = JSON.parse(options.value2)
        console.log('goodsDetail',this.goodsDetail)
      }
      this.init();
      // if(this.address != null){
			// 	this.addressId = this.address.id;
			// }
			// // 如果没有选择地址
			// if(!this.address.id){
			// //	this.getAddrList();
			// }
    },
    onShow(){
      this.init();
			this.addressId = uni.getStorageSync('address_id')?uni.getStorageSync('address_id'):'';
			// console.log(!this.address)
			console.log("address_id：",this.addressId);
			if(this.addressId){
				this.getAddressDatil();
			}
    },
    methods: {
      init(){
        this.getUserAddressInfo()
        this.getParams()
      },
      // 提交订单
			addOrder(){
        console.log(11)
				if(this.sendType=='01'){
          console.log("address_id：",this.addressId);
          if(!this.addressId || this.addressId == undefined || this.addressId == null){
            return this.$tools.toast('请选择或者绑定收货地址');
          }
          // if(!this.payTypeObj.payType){
          //   return this.$tools.toast('请选择支付方式');
          // }
        }
        if(this.shopType=='02' && this.goodsDetail.goods_type=='01' && this.currentIndex==0){
          const total = this.goodsDetail.goods_base_num * this.num
          console.log('total',total)
          if(total<this.minNum)
            return this.$tools.toast(`本商品兑换数量最少${this.minNum}台`);
        }
				var data = {
					product_id: this.goodsDetail.id,
					goods_num: this.num,
          send_type:this.sendType,
          pay_money:this.payTotal,
          note:this.remark,
					pick_type: this.shopType=='01'?'01':this.pickType,
				};
        if(this.sendType=='01'){
          data['address_id'] = this.addressId
        }
				console.log("data：",data);
				// 创建订单
				this.$Ajax('/api/productOrder/submitOrder',data, res => {
						if(res.success){
							this.orderId = res.data.userProductOrder.order_id;
              if(this.shopType =='01'){
                // #ifdef MP-WEIXIN
                this.upPayOrder()
                // #endif

                // h5或者App支付
                // #ifdef APP-PLUS || H5
                this.openPopup('payPopup');
                // #endif
              }else{
                this.openPopup('psdPopup');
              }
						}else{
							this.$tools.toast(res.msg);
						}
					}, err => {
					}
				);
			},
      submit(){
        if(this.sendType=='01'){
          console.log("address_id：",this.addressId);
          if(!this.addressId || this.addressId == undefined || this.addressId == null){
            return this.$tools.toast('请选择或者绑定收货地址');
          }
        }
        if(this.shopType =='01'){
          // #ifdef MP-WEIXIN
          this.upPayOrder()
          // #endif
          
          // h5或者App支付
          // #ifdef APP-PLUS || H5
          this.openPopup('payPopup');
          // #endif
        }else{
          this.openPopup('psdPopup');
        }
      },
      // 线上微信，支付宝，银行卡支付
			upPayOrder(){
				let that = this;
        // #ifdef MP-WEIXIN
        console.log('微信小程序支付')
        let wechatpay_trade_type = '03'
        //在成功的回调中去使用微信登录
        uni.login({
          provider: 'weixin', //使用微信登录
          success(lres) {
            console.log(lres, '请求微信登录返回的数据');
            that.wechat_code = lres.code
            console.log('wechat_code', that.wechat_code);
            var data = {
					// "addressId": that.addressId,
					"order_id": that.orderId,
          wechatpay_trade_type:wechatpay_trade_type,
          wechat_code:that.wechat_code
					// "pay_password": this.$md5(this.password),
					// "orderStatus": 2
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				that.$Ajax('/api/productPay/paySysProduct',
				data,
				res => {
            uni.hideLoading();
						if(res.success){
              const wechat_sdk = res.data.wechat_sdk
              console.log('wechat_sdk:' , wechat_sdk);
              const data={
                appId:wechat_sdk.appId,
                provider: 'wxpay',
                timeStamp: wechat_sdk.timeStamp,
                nonceStr: wechat_sdk.nonceStr,
                package: wechat_sdk.package,
                signType: wechat_sdk.signType,
                paySign: wechat_sdk.paySign,
              }
              console.log('data:',data);
              // 微信小程序支付参数。
              uni.requestPayment({
                appId:wechat_sdk.appId,
                provider: 'wxpay',
                timeStamp: wechat_sdk.timeStamp,
                nonceStr: wechat_sdk.nonceStr,
                package: wechat_sdk.package,
                signType: wechat_sdk.signType,
                paySign: wechat_sdk.paySign,
                success: function (res) {
                  console.log('success:' ,res.data);
                  that.$tools.toastJump(res.data,'/pages/order/order',1);
                },
                fail: function (err) {
                  console.log('fail:' , err);
                  that.$tools.toastJump(err.errMsg,'/pages/order/order',1);
                }
              });
              }
            },err => {
              uni.hideLoading();
            }
          )
          }
        });
        // #endif

        // #ifdef APP-PLUS || H5
        console.log('APP或H5支付')
        let alipay_trade_type = '01'
        // #ifdef APP-PLUS
        alipay_trade_type = '02'
        // #endif
        var data = {
					// "addressId": that.addressId,
					"order_id": that.orderId,
          order_pay_type:that.payTypeObj.payType,
          alipay_trade_type:alipay_trade_type,
          wechatpay_trade_type:alipay_trade_type,
          order_return_url:this.$url.urlPath+'/#/pages/order/order',
          order_quit_url:this.$url.urlPath+'/#/pages/order/order',
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				that.$Ajax('/api/productPay/paySysProduct',
				data,
				res => {
            uni.hideLoading();
						if(res.success){
              // 支付宝跳转
              // #ifdef H5
              const form = that.payTypeObj.payType=='01'?res.data.ali_sdk:res.data.wechat_sdk
              // console.log('form:' , form);
              // //将接口返回的Form表单显示到页面
              document.querySelector('body').innerHTML = form;
              //调用submit 方法
              document.forms[0].submit()
              // #endif
              // #ifdef APP-PLUS
              if(that.payTypeObj.payType=='01'){ // 支付宝
                const orderInfo = res.data.ali_sdk
                console.log('orderInfo:' , orderInfo);
                // 支付宝支付参数。
                uni.requestPayment({
                  provider: 'alipay',
                  orderInfo: orderInfo, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
                  success: function (res) {
                      console.log('success:' + JSON.stringify(res));
                      that.$tools.toastJump(res.data,'/pages/order/order',1);
                  },
                  fail: function (err) {
                      console.log('fail:' + JSON.stringify(err));
                      that.$tools.toastJump(JSON.stringify(err),'/pages/order/order',1);
                  }
                });
              }else if(that.payTypeObj.payType=='02'){ // 微信
                const wechat_sdk = res.data.wechat_sdk
                console.log('wechat_sdk:' , wechat_sdk);
                const data={
                  appId:wechat_sdk.appId,
                  provider: 'wxpay',
                  timeStamp: wechat_sdk.timeStamp,
                  nonceStr: wechat_sdk.nonceStr,
                  package: wechat_sdk.package,
                  signType: wechat_sdk.signType,
                  paySign: wechat_sdk.paySign,
                }
                console.log('data:',data);
                // 微信app支付参数。
                uni.requestPayment({
                  appId:wechat_sdk.appId,
                  provider: 'wxpay',
                  timeStamp: wechat_sdk.timeStamp,
                  nonceStr: wechat_sdk.nonceStr,
                  package: wechat_sdk.package,
                  signType: wechat_sdk.signType,
                  paySign: wechat_sdk.paySign,
                  success: function (res) {
                    console.log('success:' ,res.data);
                    that.$tools.toastJump(res.data,'/pages/order/order',1);
                  },
                  fail: function (err) {
                    console.log('fail:' , err);
                    that.$tools.toastJump(err.errMsg,'/pages/order/order',1);
                  }
                });
              }
              // #endif
              }
            },err => {
              uni.hideLoading();
            }
          )
        // #endif
			},
			// 其他支付
			psdSubmit(){
				if (this.password == '' ) {
					return this.$tools.toast('请输入支付密码');
				}
				var data = {
					"order_id": this.orderId,
					"pay_password": this.$md5(this.password),
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/productPay/paySysProduct',
				data,
				res => {
						if(res.success){
							this.$tools.toastJump('支付成功','/pages/order/order',1);
							this.hidePopup('psdPopup');
							uni.hideLoading();
						}else if(res.code == 'code_999986'){
							this.$tools.toastJump('请设置支付密码','/pages/setup/editPayPsd',1);
						}
					},err => {
						console.log("err：",err);
						if(err.errorCode == 'code_999986'){
							this.$tools.toastJump('请设置支付密码','/pages/setup/editPayPsd',1);
						}
						uni.hideLoading();
					}
				)
			},
      // 切换支付方式
      changePayMent(item){
        this.payTypeObj.id = item.id 
        this.payTypeObj.payType = item.type 
        console.log(this.payTypeObj.payType)
        this.hidePopup('payPopup');
        this.upPayOrder();
      },
      // 切换取货方式
      changeTab(index,type){
        if(this.tabIndex !=index){
          this.tabIndex = index
          this.sendType = type
        }
      },
      // 切换划拨对象
      changeTab1(index,type){
        if(this.currentIndex !=index){
          this.currentIndex = index
          this.pickType = type
        }
      },
      goAddr(){
				// if(this.orderId == ''){
					this.$tools.jump('/pages/address/address',1);
				// }
			},
      redece(){
				if(this.num > 1){
					this.num --;
				}else{
					this.num = 1;
				}
				// this.getBalanceExchange();
			},
			add(){
				this.num ++;
				// this.getBalanceExchange();
			},
      // 查询默认地址
			getUserAddressInfo(){
				var data = {

        };
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/user/address/getUserAddressInfo',data,
				res => {
          uni.hideLoading();
            if(res.data.userAddress){
              this.address = res.data.userAddress
              this.addressId = this.address.address_id
            }
					}, err => {
						uni.hideLoading();
					},
				)
			},
      // 获取详情地址
      getAddressDatil(){
        var data = {
          address_id:this.addressId
        }
        this.$Ajax('/api/user/address/getUserAddressById',data,
          res => {
          uni.hideLoading();
            if(res.data.userAddress){
              this.address = res.data.userAddress
            }
          }, err => {
            uni.hideLoading();
          },
        )
      },
      // 参数代码查询系统参数-积分向平台兑换机具最低数量
      getParams(){
        var data = {
          code:'platformExchangeMachineryNum'
        };
        this.$Ajax('/api/common/sysParam/getParamByCode',data,
				res => {
            if(res.success){
              this.minNum = res.data
            }
					}, err => {
					},
				)
      },
      /* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
    },
};
</script>

<style lang="scss" scoped>
.confirmOrder{
    overflow: hidden;
    padding-bottom: 200rpx;
    .postMethod{
      float: right;
      margin: 0rpx;
      width:176rpx ;
      background: #FFFFFF;
      border-radius: 32rpx;
      border: 1rpx solid #E8E8E8;
      @include flexLeft;
      .item{
        font-size: 24rpx;
        color: rgba(0,0,0,0.5);
        width: 88rpx;
        text-align: center;
        height: 64rpx;
        line-height: 64rpx;
      }
      .active{
        background: #AD2926;
        color: #fff;
        border-radius: 32rpx;
      }
    }
    .address{
        clear: both;
        width: 100%;
        margin: auto;
        margin-top: 20rpx;
        background: #fff;
        border-radius: 12rpx;
        .noaddress{
            height: 184rpx;
            font-size: 30rpx;
            color: #666666; 
            @include flexCenter;
        }
        .ico{
              width: 31rpx; 
              height: 31rpx; 
              margin-left: 18rpx;
            }
      &-item{
        @include flexBetween;
        padding: 30rpx 20rpx;
        .ico-addr{
          width: 48rpx; 
          height: 48rpx;
          margin-right: 18rpx; 
        }
        .ico{
            width: 31rpx; 
            height: 31rpx; 
            margin-left: 18rpx;
          }
        .txt{
          width:100%;
          .city{
            font-size: 30rpx;
            color: #333333;
          }
          .name{
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
    }
    .goods{
      clear: both;
      width: 93.6%;
      margin: auto;
      margin-top: 20rpx;
      background: #fff;
      border-radius: 12rpx;
      padding: 32rpx 20rpx;
      .item{
        @include flexLeft;
        padding-bottom: 24rpx;
        border-bottom:1px solid #eee ;
      }
      .img{
        width: 342rpx;
        height: 342rpx;
        image{
          height: 100%;
        }
      }
      .left{
        padding-left: 20rpx;
      }
      .name{
        font-weight: 500;
        font-size: 32rpx;
        color: #333;
      }
      .price{
            margin-top: 12rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: #AD2926;
            height: 48rpx;
            .unit{
                font-size: 24rpx;
            }
        }
      .operate{
        @include flexBetween;
        padding-top: 24rpx;
        font-size: 28rpx;
        color: #333333;
        .btn{
          @include flexLeft;
        }
        .ico-bg{
          width: 48rpx;
          height: 48rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .inp{
          width: 100rpx;
          text-align: center;
          height: 48rpx;
          background: #E7E7E7;
          border-radius: 4rpx;
          margin: 0 10rpx;
        }
      }
    }
    .warn{
      margin-top: 12rpx;
      text{
          font-size: 20rpx;
          color: #ED7B2F;
          background: #FFF5EF;
          border-radius: 12rpx;
          padding: 6rpx 18rpx;
      }
    }
    .tab{
      width: 93.6%;
      margin: auto;
      margin-top: 20rpx;
      @include flexBetween;
      margin-top: 20rpx;
			.item{
					width: 220rpx;
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #666;
					background: #F3F4F9;
					border-radius: 8rpx;
					margin-right: 24rpx;
			}
      .item:last-of-type{
        margin-right: 0;
      }
			.active{
					border:2rpx solid #AD2926;
					color: #AD2926;
					font-weight: 500;
			}
			}
    .info{
      width: 93.6%;
      margin: auto;
      margin-top: 20rpx;
      background: #fff;
      border-radius: 12rpx;
      padding: 38rpx 28rpx;
      font-size: 28rpx;
      @include flexBetween;
      .txt{
        color: #858585;
      }
      .p,textarea{
        color: #333;
        font-size: 28rpx;
      }
      textarea{
        height: 200rpx;
      }
    }
    /deep/ .uni-switch-input{
      width: 88rpx;
      height: 48rpx;
    }
    /deep/ .uni-switch-input:after, /deep/  .uni-switch-input:before{
      width: 40rpx;
      height: 40rpx;
    }
    .bottom{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 32rpx; 
        @include flexBetween;
        box-sizing: border-box;
        .left{
          font-size: 28rpx;
          color: rgba(0,0,0,0.9);
          .price{
            color: #AD2926;
            font-size: 36rpx;
          }
        }
        .btn{
          width: 234rpx;
          text-align: center;
          height: 80rpx;
          line-height: 80rpx;
          border-radius: 86rpx;
          font-size: 30rpx;
          background: #AD2926;
          color: #fff;
          box-sizing: content-box;
        }
    }
}
// 支付弹窗
.modalPsd{
  background: #fff;
  .payBox{
    padding: 32rpx 20rpx;
    &-header{
      text-align: center;
      padding: 0 24rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      line-height: 52rpx;
      position: relative;
      .cancel{
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        position: absolute;
        bottom: 0;
        right: 24rpx;
      }
    }
    .price{
          margin: 0 14rpx;
          margin-top: 12rpx;
          text-align: center;
          font-size: 34rpx;
          font-weight: bold;
          color: #AD2926;
          line-height: 48rpx;
          padding: 32rpx;
          border-bottom: 1px solid #eee;
          .unit{
              font-size: 24rpx;
          }
      }
    .info{
      @include flexBetween;
      padding: 64rpx 20rpx;
      border-bottom: 1px solid #eee;
      .left{
        @include flexLeft;
        font-size: 32rpx;
        color: #333333;
        .img{
          width: 72rpx;
          height: 72rpx;
          margin-right: 12rpx;
        }
      }
      .right{
        .ico{
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .info:last-of-type{
      border-bottom: none;
    }
  }
}
</style>
